<template>
  <view class="x-hot-spot" :style="[componentStyle]">
    <block v-for="(item,index) in spotList" :key="index">
      <view :style="[item.spotStyle]" class="spot" @click="handleClickSpot(item)"></view>
    </block>
  </view>
</template>

<script>
import navigateTo from '@/utils/x-navigate';
import formatStyle from '@/utils/x-format-style';
export default {
  name: 'HHotSpot',
  components: {},
  props: {
    detail: {
      type: Object,
      default: () => ({
        componentContentList: []
      })
    },
    sourcePageType: { // 埋点用
      type: [String, Object],
      default: '1'
    },
    sourcePageId: { // 埋点用源页面Id
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    },
    groupsSource: {
      type: [String, null],
      default: ''
    }
  },
  data() {
    return {
      componentStyle: {},
      spotList:[]
    };
  },
  computed: {

  },
  watch: {},
  created() {
    this.handleComponentStyle();
    this.getSpotList()
  },
  methods: {
    getSpotList(){
      this.spotList = this.detail?.componentContentList?.map(item => {
        const {x, y, width, height} = item.contentStyle
        return {
          ...item,
          spotStyle: {
            top: `${y}rpx`,
            left: `${x}rpx`,
            width: `${width}rpx`,
            height: `${height}rpx`
          }
        };
      });
    },
    handleClickSpot(item) {
      navigateTo(item, {
        sourcePageType: this.sourcePageType,
        sourcePageId: this.sourcePageId,
        source: this.source,
        groupsSource: this.groupsSource
      });
      this.$XTrack('onBannerEvent', {
        componentId: this.detail.id,
        spotId: item.id
      });
    },
    handleComponentStyle() {
      const { borderRadius,width, height, backgroundImage } = this.detail?.componentStyle;
      this.componentStyle = {
        ...formatStyle(this.detail?.componentStyle, ['marginBottom', 'backgroundColor']),
        borderRadius: borderRadius === 1 ? '20rpx' : 0,
        width: '750rpx',
        height: `${750 * height / width}rpx`,
        backgroundImage: `url(${backgroundImage})`,
      };
    }
  }
};
</script>

<style scoped lang="scss">
  .x-hot-spot{
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    .spot{
      position: absolute;
    }
  }
</style>
